<template>
	<view style="z-index: 100;">
		<!-- <u-button type="primary" @click="share_qrcode()">生成海报</u-button> -->
		<!-- <xq-generate-poster ref="draw" /> -->
		<XQ-GeneratePoster ref="draw" />
		<view class='qrcode-box' style="z-index: -100;" >
			<view class='qrcode-canvas-view'>
				<canvas class='qrcode-canvas' @click="previewImage" canvas-id='qrcode'></canvas>
				<!-- <block v-if='logoImg'>
					<image class='logo-img opt-btn' :src='logoImg' @click='updateLogo'></image>
				</block>
				<block v-else>
					<view class='logo-img opt-btn' @click='updateLogo'>LOGO</view>
				</block> -->
				<!-- <view class="qrcode-color opt-btn" :style="'background:'+color" @click="showColorPicker">颜色</view> -->
			</view>
			<view class='qrcode-opretion'>
				<button @click='doCreateQRCode' class='qrcode-btn'>生成二维码</button>
			</view>
			<view class='qrcode-opretion'>
				<button @click='savePic' class='qrcode-btn'>保存二维码</button>
			</view>
			<view class='qrcode-opretion'>
				<button @click='share_qrcode' class='qrcode-btn'>生成海报</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	let QRCode = require('../../tools/qrcode.js').default
	// import XqGeneratePoster from '@/components/XQGeneratePoster.vue';
	// import XqGeneratePoster from '@/uni_modules/XQ-GeneratePoster/components/XQ-GeneratePoster/XQ-GeneratePoster.vue';
	export default {
		components: {
			tColorPicker
		},
		// components: { XqGeneratePoster },
		data() {
			return {
				openid:"",
				canvasId: 'qrcode',
				QR: '', // 二维码
				qrText: 'hhhhhhhhhh', // 输入的二维码内容
				logoImg: '', // logo图片
				color: '#000000', // 选择的颜色，默认：黑色
				colorData: {r: 0,g: 0,b: 0,a: 1},
				option: {
					//绘制海报内容
					codeUrl: 'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg', //小程序太阳码
					// codeUrl: '/static/tym.jpg', //小程序太阳码
					coverUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8a632dba-9b15-44c8-b196-f1ab51407924/b4a06ff9-1d83-4223-a10c-dc63a510dd16.png', //题库图片
					headUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8a632dba-9b15-44c8-b196-f1ab51407924/0f5a6c43-916a-4b81-86a6-2a24db88471b.jpg', //头像
					bgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8a632dba-9b15-44c8-b196-f1ab51407924/6b61c1e8-9084-4e5d-98c9-1280752b6a79.png', //图片背景填充，和 fillStyle 只能传一个，bgUrl 优先级高于 fillStyle
					fillStyle: '#0688ff', //纯色背景填充颜色
					nickName: '食小助', //授权登录的用户名
					miniName: '中南校园综合服务平台', //小程序名称
					tkName: '进入中南大学学生必不可少的实用工具，致力于打造涵盖校园学习生活方方面面的校园一站式综合生活服务平台。', //题库名称
					tkAuthor: '食小助', //题库作者
					tkType: '考试', //题库类型
					cost: '免费', //是否需要收费   免费/付费
					isPub: '公开' //公开 还是 私有
				}
			};
		},
		onLoad(option) {
			let that = this
			let res = uni.getSystemInfoSync()
			this.openid = option.openid
			that.canvasWidth = res.windowWidth * 350 / 750
			that.canvasHeight = res.windowWidth * 350 / 750
			let qrcode = new QRCode(that.canvasId, {
				text: '没有填写内容哦',
				width: that.canvasWidth,
				height: that.canvasHeight,
				colorDark: '#ccc',
				colorLight: '#fff',
				correctLevel: QRCode.correctLevel.H,
				logo: '',
				successTips: false
			})
			that.QR = qrcode
			this.openid = "oryqr6fcWZdnLWZ6OYa1NzymSza0"
			that.initCode()
		},
		methods: {
			initCode(){
				let that = this
				uni.request({
					url:"https://zback.shixiaozhu.work/ShixiaozhuTest/user/getCode?openid="+this.openid,
					success(res) {
						if(res.data.status==200){
							that.qrText = "http://shixiaozhu.nanju.work/#/pages/index/index?code="+res.data.data
							that.doCreateQRCode()
						}else{
							uni.showModal({
								title:"获取出错，请联系管理员"
							})
						}
					}
				})
			},
			share_qrcode() {
				this.$refs.draw.share_qrcode(this.option);
			},
			doCreateQRCode () {
				let that = this
				// 生成二维码
				uni.showLoading({
					title: '正在生成...',
				})
				this.QR.clear()
				this.QR._opts.colorDark = this.color
				this.QR._opts.logo = this.logoImg || false
				this.QR._opts.successTips = false
				this.QR.makeCode(this.qrText)
				this.createQRCodeDone = true
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.canvasWidth,
					height: this.canvasHeight,
					destWidth: 472,
					destHeight: 472,
					canvasId: this.canvasId,
					success (res) {
						that.option.codeUrl = res.tempFilePath
						console.log("哈哈",that.option.codeUrl)
					}
				})
				uni.hideLoading()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.text {
		background-color: #f3f3f3;
		margin: 24rpx;
		padding: 24rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.text text {
		font-weight: 700;
		margin-left: 16rpx;
	}
	
	.qrcode-box {
		z-index: -100; 
		font-size: 28rpx;
		width: auto;
		height: 360rpx;
		margin: 20rpx auto;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.qrcode-canvas-view {
		height: 356rpx;
		width: 356rpx;
		margin: 40rpx auto;
		border: solid 1rpx #ccc;
	}
	.qrcode-canvas {
		margin: 2rpx;
		height: 350rpx;
		width: 350rpx;
	}
	.opt-btn {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background: #000;
		box-shadow: 0 0 10rpx #999;
		font-size: 24rpx;
		text-align: center;
		border-radius: 50%;
		margin-right: 10rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		z-index: 2;
	}
	.qrcode-color {
		top: 120rpx;
	}
	.logo-img {
		background: #D8B765;
	}
	.message-content {
		padding: 2%;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		min-height: 40rpx;
		margin: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.qrcode-opretion {
		width: 100%;
		overflow: hidden;
		margin-top: 30rpx;
		.qrcode-btn {
			background-image: linear-gradient(100deg, #D8B765, #B58862);
			color: #fff;
			margin: 20rpx auto;
			border-radius: 70rpx;
		}
	}
	
</style>
